<template>
  <div class="recommend">
    <headerNav></headerNav>

   
    <!-- 轮播图 -->
    <div class="banner">
      <div class="imgs">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="(item, index) in banner" :key="index">
            <img :src="item.i" />
          </van-swipe-item>
        </van-swipe>
      </div>
    </div>
    <!-- -->
    <div class="Content">
      <div class="content" v-for="(item, index) in type" :key="index">
        <div class="title">
          <div class="userimg">
            <img :src="item.r.a.p" alt="" />
          </div>
          <div class="username">{{ item.r.a.n }}</div>
          <div class="lv">LV.{{ item.r.a.lvl }}</div>
        </div>
        <router-link tag="div" :to="'/recipe/recipelist?id=' + item.r.id" class="img">
          <img :src="item.r.p" alt="" />
          
        </router-link>
        <div class="Collection">
          <div class="items">
            <div
              class="item"
              v-for="value in item.r.collect_users"
              :key="value.id"
            >
              <img :src="value.p" alt="" />
            </div>

            <div class="num">{{ item.r.collect_count_text }}</div>
          </div>
          <div
            :class="[
              'iconfont',
              item.r.collect_status==0 ? 'icon-shoucang' : 'icon-shoucang-tianchong',
            ]"
            @click.stop="toggle(index, item.r.collect_status)"
          ></div>
        </div>
        <div class="buttom">{{ item.r.n }}</div>
      </div>
    </div>

 <van-loading v-if="type" size="30px" vertical>加载中...</van-loading>
    <!-- 底部导航 -->
    <footNav> </footNav>
  </div>
</template>

<script>
import footNav from "../base/footNav.vue";
import headerNav from "../base/headerNav.vue";

import Vue from 'vue';
import { Swipe, SwipeItem } from 'vant';
import { Loading } from "vant";
Vue.use(Loading);
Vue.use(Swipe);
Vue.use(SwipeItem);

import { getRecommended } from "../../api/home";
// import axios from "axios";
import { Toast } from "vant";
export default {
  data() {
    return {
      recommended: null,
      banner: null,
      list: null,
      type: [],
      types: [],
      icon: true,
    };
  },
  methods: {
    getRecommendedFun() {
      getRecommended().then((data) => {
        this.recommended = data.result;
        this.banner = data.result.banner;
        this.list = data.result.list;
        console.log(this.list);
        this.list.forEach((item) => {
          if (item.r) {
            var i = item;
            this.type.push(i);
            console.log(i);
          }
        });
        console.log(this.type);
      });
    },
    toggle(index,collect_status) {
     
       if (collect_status == 0) {
        this.type[index].r.collect_status = 1;
         Toast("收藏成功");
      } else {
        this.type[index].r.collect_status = 0;
        
      }
    },
  },
  created() {
    this.getRecommendedFun();
  },
  
  components: {
    headerNav,
    footNav,
  },
};
</script>
<style lang="less">
.recommend {
  .banner {
    position: relative;
    margin-bottom: 15px;
    .imgs {
      position: relative;
      left: 0px;
      right: 0px;
      top: 0px;
      margin: auto;
      width: 96%;
      overflow: hidden;
      img {
        width: 100%;
      }
    }
  }
  .Content{
    margin-bottom: 70px;
    .content {
    .title {
      display: flex;
      align-items: center;
      margin-bottom: 8px;
      .userimg {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        margin-left: 10px;
        img {
          width: 30px;
          height: 30px;
          border-radius: 50%;
        }
      }
      .username {
        color: #343434;
        font-size: 10px;
        font-weight: bold;
        margin: 0 10px;
      }
      .lv {
        color: #fdc837;
        font-size: 10px;
        font-weight: bold;
      }
    }
    .img {
      width: 100%;
      margin-bottom: 8px;
      img {
        width: 100%;
      }
    }
    .Collection {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 0 10px;
      margin-bottom: 15px;
      .items {
        // position: relative;
        display: flex;
        .item {
          // position: absolute;
          width: 15px;
          height: 15px;
          border-radius: 50%;
          img {
            width: 15px;
            height: 15px;
            border-radius: 50%;
          }
        }
      }
      .num {
        font-weight: bold;
        margin-left: 8px;
        color: #010101;
        font-size: 12px;
      }
      .iconfont {
        font-size: 22px;
        font-weight: bold;
      }
      .icon-shoucang-tianchong{
        color: #fdc837;
      }
    }
    .buttom {
      color: #1d1d1d;
      font-size: 12px;
      margin-left: 10px;
      margin-bottom: 20px;
    }
  }
  }
  
}
</style>